GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>CSS-Framework</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">CSS-Framework</span></h1>

</header>

</div>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p>Ein <b>CSS-<a href="Framework" title="Framework">Framework</a></b> ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes <a href="Webdesign" title="Webdesign">Webdesign</a> mit <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a>.

Die meisten CSS-Frameworks bieten als Basis ein <a href="Gestaltungsraster" title="Gestaltungsraster">Grid-Gestaltungsraster</a> sowie einige grundlegende Gestaltungselemente wie Schaltflächen, Menüs und Eingabefelder. Größere Frameworks bieten zudem noch <a href="JavaScript" title="JavaScript">JavaScript</a>-basierte Funktionen, welche die Gestaltungselemente um zusätzliche, aber in der Regel optionale Funktionalitäten erweitern (<a href="Unobtrusive_JavaScript" title="Unobtrusive JavaScript">Unobtrusive JavaScript</a>).

</p><p>CSS-Frameworks können unterschiedliche Funktionen anbieten:

</p>

<ul><li>Die Hauptfunktion ist meist ein <a href="Gestaltungsraster" title="Gestaltungsraster">Grid-System</a>, besonders auch für <a href="Responsive_Webdesign" title="Responsive Webdesign">Responsive Webdesign</a>. Diese unterscheiden sich in<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

<ul><li>den möglichen Grundbreiten des <a href="Viewport" title="Viewport">Viewports</a> und eventuelle Breakpoints,</li>

<li>der Verwendung von <a href="Pixel" title="Pixel">Pixel</a> (px), der aktuellen Schriftgröße (<a href="Em_(Schriftsatz)" title="Em (Schriftsatz)">em</a>) oder prozentualen Werten für Breitenangaben,</li>

<li>der Anzahl der <a href="Spaltensatz" title="Spaltensatz">Spalten</a> und Reihen,</li>

<li>der relativen oder absoluten Verschachtelung von Elementen und</li>

<li>der Art und Weise der Media Queries.</li></ul></li>

<li>Vor allem größere Frameworks bieten auch zahlreiche <b>graphische Elemente</b> wie

<ul><li><a href="Webtypografie" title="Webtypografie">Webtypografie</a>,</li>

<li>Icon-Sets in <a href="CSS-Sprites" title="CSS-Sprites">CSS-Sprites</a> oder <a href="Webtypografie#Icon-Fonts" title="Webtypografie">Icon-Fonts</a>,</li>

<li>Styling für <a href="Dropout-Men%C3%BC" title="Dropout-Menü">Dropout-Menüs</a>, <a href="Tooltip" title="Tooltip">Tooltips</a>, <a href="Schaltfl%C3%A4che" title="Schaltfläche">Schaltflächen</a>, Elemente von <a href="Webformular" title="Webformular">Webformularen</a> und</li>

<li>Elemente für <a href="Grafische_Benutzeroberfl%C3%A4che" title="Grafische Benutzeroberfläche">grafische Benutzeroberflächen</a> wie Akkordeon, <a href="Registerkarte" title="Registerkarte">Registerkarten</a>, Galerien oder Modal-Fenster (<a href="Lightbox" title="Lightbox">Lightbox</a>).</li></ul></li>

<li>Zusätzlich bieten viele Frameworks CSS Anpassungen, beispielsweise

<ul><li><a href="Reset-Stylesheet" title="Reset-Stylesheet">Reset-Stylesheets</a> zur Vereinheitlichung der Formatierungen,</li>

<li>oft verwendete CSS-Hilfsklassen (<i>left</i>, <i>hide</i>) oder</li>

<li>Equalizer, um Inhalte auf gleiche Höhe zu bringen.</li></ul></li></ul>

<p>Größere CSS-Frameworks verwenden CSS-Interpreter wie <a href="Sass_(Stylesheet-Sprache)" title="Sass (Stylesheet-Sprache)">Sass</a>, <a href="Less_(Stylesheet-Sprache)" title="Less (Stylesheet-Sprache)">Less</a> oder <a href="Stylus_(Stylesheet-Sprache)" title="Stylus (Stylesheet-Sprache)">Stylus</a>.

</p><p>Einige weit verbreitete Beispiele sind <a href="Bootstrap_(Framework)" title="Bootstrap (Framework)">Bootstrap</a>, <a href="YAML_(Framework)" title="YAML (Framework)">YAML</a>, <a href="Foundation_(Framework)" title="Foundation (Framework)">Foundation</a>, UIkit, Skeleton oder Semantic UI.

</p>

<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>

<ul><li><a href="Webframework" title="Webframework">Webframework</a></li>

<li><a href="Liste_von_Webframeworks" title="Liste von Webframeworks">Liste von Webframeworks</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

/* start https://de.wikipedia.org/ */

.mw-parser-output .webarchiv-memento a{color:inherit}

/* end https://de.wikipedia.org/ */

</style><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150531094916/http://responsive.vermilion.com/compare.php">Archivierte Kopie</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> des <style data-mw-deduplicate="TemplateStyles:r250917974">

/* start https://de.wikipedia.org/ */

.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}

/* end https://de.wikipedia.org/ */

</style><span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fresponsive.vermilion.com%2Fcompare.php">Originals</a></span> vom 31. Mai 2015 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span> <b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/http://responsive.vermilion.com/compare.php">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="http://responsive.vermilion.com/compare.php">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/responsive.vermilion.com</span></span>

</li>

</ol>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://usablica.github.io/front-end-frameworks/compare.html?v=2.0">CSS Front-end Frameworks with comparison</a> (englisch) Vergleich zahlreicher Frameworks mit unterstützten Browsern und Nutzung von LESS/SASS</li>

<li><a rel="nofollow" class="external text" href="https://github.com/troxler/awesome-css-frameworks">Awesome CSS Frameworks</a> Aktuelle Liste von CSS Frameworks (sortiert nach Kategorie und Beliebtheit)</li>

<li><a rel="nofollow" class="external text" href="https://www.techgeekbuzz.com/best-css-frameworks/">List of Best CSS Frameworks</a> – Die besten CSS-Frameworks helfen Ihnen, verantwortungsbewusstere Webseiten zu erstellen.</li></ul></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-09-11" href="https://de.wikipedia.org/wiki/?title=CSS-Framework&oldid=259653107">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>